
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--查找评论数据：
    按1：医院查找、2：按科室查找，3：按医院的科室查找找到医生、4：按医生姓名查找医生：查找完之后内部0按评价等级划分-->
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/milligram.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/fonts.style.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/jQueryCode.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <style type="text/css">
        input::-webkit-calendar-picker-indicator {
            display:none;
        }
        /*.dr-msg-form span {*/
            /*display:block;*/
            /*width: auto!important;*/
        /*}*/
        #contentP {
            padding: 0 70px 0 30px;
        }
        #searchByhospital{margin:0;}
        .dr-msg-form div[class*='col-'] {
            white-space: nowrap;
        }
        .tab-info-tr th{
            vertical-align: top;
        }
        .jumbotron {
            background-color: #eee;
            padding-bottom: 50px;
        }
        .jumbotron a.btn {
            cursor: pointer;
            color: #fff;
            border-color: #f62459;
            background-color: #f62459;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
        }
        .jumbotron a.btn:hover {
            color: #fff;
            border-color: #cf000f;
            background-color: #cf000f;
        }
    </style>

</head>
<body>
<div class="top-nav animation-bg-color-skyblue">
    <div class="logo">
        <a href="#"><img th:src="@{/img/logo.png}" /></a>
    </div>
    <div class="account-check fr">
        <div class="before-login">
            <a class="a-btn animation" href="/user/login">
                <span class="icon-enter"></span>登录
            </a>
            <a class="a-btn animation" href="/user/register">
                <span class="icon-user-plus"></span>注册
            </a>
        </div>
        <div class="after-login hide">
            <!--<a class="a-btn animation fr" href="#">-->
            <!--<span class="icon-exit"></span>退出-->
            <!--</a>-->
            <h5 class="fr">欢迎登陆:13049148938</h5>
        </div>
    </div>

    <div class="s-side animation-bg-color-skyblue">
        <ul>
            <!--这部分是导航栏信息。-->
            <li class="s-firstItem first">
                <a href="/user/index">
                    <i class="fa fa-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <!--查找-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>查找</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toFindEval">
                            查找医生&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--预约挂号-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>预约挂号</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/reservation/toReserve">
                            预约&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>

            <!--社区-->
            <li class="first">
                <div class="d-firstNav s-firstNav">
                    <i class="fa fa-bars"></i>
                    <span>社区</span>
                    <i class="fa fa-caret-right fr" ></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>文章</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toSendArticle">
                                    发表文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/community/showArticle">
                                    浏览文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>帖子</span>
                            <i class="fa fa-caret-right fr "></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toCommunity">
                                    浏览帖子&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <!--个人中心-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>个人中心</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>个人资料</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/user/userInfo">
                                    个人信息&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/password">
                                    修改密码&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/verify">
                                    实名认证&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>钱包</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/reservation/toWallet">
                                    我的钱包&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toRecharge">
                                    充值&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toBill">
                                    我的账单&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/community/toCollection">
                            我的收藏&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toMyEvaluate">
                            我的评价&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="layout">
    <script th:inline="javascript">
        $(function () {//begin
            //医院下拉框处理：
            $("#allHospital").change(function () {
                $("#summit").attr("disabled",true);
                // $("#doctorInfo").html("");
                var hospitalName = $(this).find("option:selected").text();//找到选择的项的内容
                if(hospitalName!=="请选择" && hospitalName!=null){
                    $("#allDepartment").attr("disabled",false);
                    $.post("/reservation/selectDepartment", {name:hospitalName},function (data) {
                        if(data.length>0){
                            $("#allDepartment").html("<option>请选择</option>");
                            $("#allDoctor").html("<option>请先选择科室</option>");
                            for (var i = 0; i<data.length; i++){
                                $("#allDepartment").append("<option value='"+ data[i].name +"'>" + data[i].name + "</option>");
                            }
                        }
                        else
                            $("#allDepartment").html("<option value='NoN'>请先选择医院</option>");
                    })
                }
                else {
                    $("#allDepartment").attr("disabled",true);
                    $("#allDoctor").attr("disabled",true);
                    $("#allDepartment").html("<option value='NoN'>请先选择医院</option>");
                    $("#allDoctor").html("<option>请先选择医院</option>");
                }
            });
            // 科室下拉框处理：
            $("#allDepartment").change(function () {
                $("#summit").attr("disabled",true);
                // $("#doctorInfo").html("");
                var hospitalName = $("#allHospital").find("option:selected").text();
                var departmentName = $(this).find("option:selected").text();
                if(departmentName!=="请选择" && departmentName!=null && departmentName!=="请先选择医院"){
                    $("#allDoctor").attr("disabled",false);
                    $.post("/reservation/selectDoctor", {hname:hospitalName,dname:departmentName},function (doctorList) {
                        $("#searchByhospital").attr("disabled",false);
                        if(doctorList.length>0){
                            $("#allDoctor").html("<option value='NON'>请选择</option>");
                            for (var i = 0; i<doctorList.length; i++){
                                $("#allDoctor").append("<option value='"+ doctorList[i].name +"'>" + doctorList[i].name + "</option>");
                            }
                        }
                        else
                            $("#allDoctor").html("<option value='NON'>请选择</option>");
                    })
                }
                else if (departmentName=="请先选择医院"){
                    $("#allDoctor").attr("disabled",true);
                    $("#allDoctor").html("<option>请先选择医院</option>");
                }else {
                    $("#allDoctor").attr("disabled",true);
                    $("#allDoctor").html("<option>请先选择科室</option>");
                }
            });
            //医生的下拉框处理：释放搜索按钮
            $("#allDoctor").change(function () {

            });
            //搜索框模糊查询的处理

        });//end
    </script>
    <div class="container">
        <div class="row">
            <div id="reserveForm" class="col-md-12">
                <form class="dr-msg-form">
                    <div class="row justify-content-end">
                        <!--医院-->
                        <div class="col-md-3 input-group">
                            <label class="input-group-addon d-flex align-items-center">医院</label>
                            <select id="allHospital" class="form-control">
                                <option value="NON">请选择</option>
                                <option  th:each="hospital : ${allHospital}" th:value="${hospital.name}" th:text="${hospital.name}"></option>
                            </select>
                        </div>
                        <!--科室-->
                        <div class="col-md-3 input-group">
                            <label class="input-group-addon d-flex align-items-center">科室</label>
                            <select id="allDepartment" class="form-control" disabled="disabled">
                                <option value="NON">请先选择医院</option>
                            </select>
                        </div>
                        <!--医生-->
                        <div class="col-md-3 input-group">
                            <label class="input-group-addon d-flex align-items-center">医生</label>
                            <select id="allDoctor" class="form-control" name="doctorName" disabled="disabled">
                                <option value="NON">请先选择医院</option>
                            </select>

                        </div>
                        <!--医院 搜索按键-->
                        <div class="col-md-2 input-group">
                            <label for="searchByhospital"></label>
                            <input id="searchByhospital" type="button" disabled="disabled" value="搜索(医院)" />
                        </div>
                    </div>
                    <div class="row justify-content-end">
                        <!--医生的搜索框，用于未输入医院和科室直接查医生的情况-->
                        <div class="col-md-3 input-group">
                            <input type="text" id="doctorName" name="searchDoctor" class="searchBox" autocomplete="on" list="mylist" onkeydown="a();"/>
                            <datalist id="mylist" type="" style="margin-top: 10px;"></datalist>
                        </div>
                        <!--医生 搜索按键-->
                        <div class="col-md-2 input-group">
                            <label for="searchByDoctorName"></label>
                            <input id="searchByDoctorName" type="button" disabled="disabled" value="搜索(医生)" />
                        </div>
                        <!--处理医生输入框下拉模块-->
                        <script>
                            //模糊查找医生
                            function searchD() {
                                $("#mylist").html("");
                                var inp=$('.searchBox').val();
                                $.post("/evaluate/findAllDoctor", {},function (data){
                                    $("#mylist").html("");
                                    for(var i =0; i < data.length;i++)
                                    {
                                        console.log("data:"+data);
                                        if(inp != "" && data[i].match(inp + ".*") != null)
                                        {
                                            $("#searchByDoctorName").attr("disabled",false);
                                            var option="<option>"+ data[i] +"</option>";
                                            $("#mylist").append(option);
                                        }
                                    }
                                });
                                //a:end
                            }
                            //绑定输入事件
                            $(".searchBox").bind('input oninput', function() {
                                var a = $(".searchBox").val();
                                console.log("a:" + a + ";");
                                if (a == null || a == " ") {
                                    $("#mylist").html("");
                                    $("#mylist").css("visibility", "hidden");
                                } else {
                                    searchD();
                                    $("#searchByDoctorName").attr("disabled","false");
                                    $("#searchByhospital").attr("disabled","true");
                                }
                            });
                            //监听删除事件，处理backspace
                            function a(){
                                if (event.keyCode == 8) {
                                    console.log("del");
                                    $("#mylist").html("sbbbbb");
                                    $("#mylist").css("visibility", "hidden");
                                }
                            }
                        </script>
                        <script>
                            // <!--处理点击事件:按医院搜索-->
                            $("#searchByhospital").click(function () {
                                var hospitalName = $("#allHospital").find("option:selected").text();
                                var departmentName = $("#allDepartment").find("option:selected").text();
                                var doctorName = $("#allDoctor").find("option:selected").text();
                                console.log("doctor:",doctorName);
                                $.post("/evaluate/findByHospitalName",{hospitalName:hospitalName,departmentName:departmentName,doctorName:doctorName},function (DoctorList) {
                                    $("#contentP").html("");
                                    for(var i in DoctorList){
                                        var introduce="没有医生描述";
                                        var intr=DoctorList[i].introduction;
                                        console.log(intr);
                                        if(intr!==null){
                                            introduce=intr;
                                        }
                                        var workduty = "没有录入";
                                        if(DoctorList[i].workDuty!==null){
                                            workduty=DoctorList[i].workDuty;
                                        }
                                        var goodrate="该医生没有被评价";
                                        if (DoctorList[i].goodRate!==null) {
                                            goodrate=DoctorList[i].goodRate+"%";
                                        }
                                        console.log("doctorList"+i+DoctorList[i]);

                                        var content = "<div class='col-md-6'><div class='jumbotron'><div class='container'><table>";
                                        content += "<tr class='tab-info-tr'><th>医生:</th><td colspan='3'>" + DoctorList[i].name + "</td></tr>";
                                        content += "<tr class='tab-info-tr'><th>好评率:</th><td colspan='3'>" + goodrate + "</td></tr>";
                                        content += "<tr class='tab-info-tr'><th>负责范围:</th><td>" + workduty + "</td>";
                                        content += "<th>工龄:</th><td>" + DoctorList[i].workYear + "</td></tr>";
                                        content += "<tr class='tab-info-tr'><th>描述:</th><td colspan='3'>" + introduce + "</td></tr>";
                                        content += "</table><a class='btn btn-primary btn-lg' href='/evaluate/findEvalAboutDoctor?doctorName=" + DoctorList[i].name + "' role='button'>了解更多(查看评价)</a>";
                                        content += "</div></div></div>";

                                        console.log("content:"+content);
                                        $("#contentP").append(content);
                                    }
                                });
                            });
                            // <!--处理点击事件：按医生搜索-->
                            $("#searchByDoctorName").click(function () {
                                var docName= $(".searchBox").val();
                                $.post("/evaluate/findByDoctorName",{doctorName:docName},function (DoctorList) {
                                    $("#contentP").html("");
                                    if (DoctorList.length == 0) {
                                        // cond ="<div>未找到该医生</div>";

                                      var  cond = "<div class='middle special-title'><h1>未找到该医生</h1></div>"
                                        $("#contentP").html(cond);
                                    } else {//else--begin
                                        for(var i in DoctorList) {
                                            var introduce="没有医生描述";
                                            var intr=DoctorList[i].introduction;
                                            console.log(intr);
                                            if(intr!==null){
                                                introduce=intr;
                                            }
                                            var workduty = "没有录入";
                                            if(DoctorList[i].workDuty!==null) {
                                                workduty=DoctorList[i].workDuty;
                                            }
                                            var goodrate="该医生没有被评价";
                                            if (DoctorList[i].goodRate!==null) {
                                                goodrate=DoctorList[i].goodRate+"%";
                                            }
                                            console.log("doctorList"+i+DoctorList[i]);

                                            var content = "<div class='col-md-6'><div class='jumbotron'><div class='container'><table>";
                                            content += "<tr class='tab-info-tr'><th>医生:</th><td colspan='3'>" + DoctorList[i].name + "</td></tr>";
                                            content += "<tr class='tab-info-tr'><th>好评率:</th><td colspan='3'>" + goodrate + "</td></tr>";
                                            content += "<tr class='tab-info-tr'><th>负责范围:</th><td>" + workduty + "</td>";
                                            content += "<th>工龄:</th><td>" + DoctorList[i].workYear + "</td></tr>";
                                            content += "<tr class='tab-info-tr'><th>描述:</th><td colspan='3'>" + introduce + "</td></tr>";
                                            content += "</table><a class='btn btn-primary btn-lg' href='/evaluate/findEvalAboutDoctor?doctorName=" + DoctorList[i].name + "' role='button'>了解更多(查看评价)</a>";
                                            content += "</div></div></div>";
                                            console.log("content:"+content);
                                            $("#contentP").append(content);
                                        }
                                    }//else--end
                                });
                            });
                        </script>
                    </div>
                </form>
            </div>
            <!--显示的内容-->
            <div id="doctorInfo" class="col-md-12">
                <div class="container">
                    <div class="row " id="contentP" >
                        <!--begin-->
                        <!--end-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
</div>

</body>
</html>




<!--js实现百度预输出-->
<!--
<div>
    <input type="text" id = "txt" name="addstuTSchool" class="addstuTSchool" placeholder="学校名" autocomplete="on" list="mylist" οnkeyup="search()"/>
    <datalist id="mylist"></datalist>
</div>
var schoolList = new Array();schoolList.push("北京大学");schoolList.push("清华大学");schoolList.push("复旦大学");
function search()
{
$("#mylist").empty();
var tea_school=$('input.addstuTSchool').val();
for(i = 1; i < schoolList.length; ++i)
{
if(tea_school != "" && schoolList[i].match(tea_school + ".*") != null)
{
var option="<option>"+ schoolList[i] +"</option>";
$("#mylist").append(option);
}
}
}
-->




